<template>
    <div>
      <div :id="id" :style="{width: width, height: height}"  v-loading="Eloadings"></div>
      <!-- <el-alert
        title="成功提示的文案"
        type="success">
      </el-alert> -->
    <!--   <el-button :plain="true" @click="Sucmsg">
      成功
      </el-button> -->
    </div>

</template>

<script>
  import echarts from 'echarts';
  import { Message } from 'element-ui';
  import axios from 'axios';
  import {westeros} from '../../components/Echarts/theme/westeros';
  import {FontToDay,DayOrder} from '../../api/autopay'; 
  export default {
    name: 'Echart_Font_Down',
    props: {
      id: {
        type: String,
        default: 'myChart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      }
    },
    data() {
      return {
        chart: null,
        OppoOrders:[],
        VivoOrders:[],
        DateList:[],
        Eloadings: false,
      }
    },

    mounted() {
      this.OrderForDay();

    },

    methods: {
      Sucmsg() {
        this.$message({
          message: "dfdsdsfsd",
          type: 'success'
        });
        
      },
      OrderForDay(){
        let oppo = {"platform":"oppo"};
        let vivo = {"platform":"vivo"};
        var that = this;
        that.Eloadings = true;

        
        axios.all([
          axios({
          method: 'post',
          url: "/v1/autopay/dayorder",
          data: oppo,
          headers: {
            'Authorization':sessionStorage.token.replace("\"","").replace("\"","")
          }
        }),axios({
          method: 'post',
          url: "/v1/autopay/dayorder",
          data: vivo,
          headers: {
            'Authorization':sessionStorage.token.replace("\"","").replace("\"","")
          }
        })]).then(axios.spread(function (oppores, vivores){
            let { oppo_code, oppo_msg, oppo_data } = oppores.data;
            let { vivo_code, vivo_msg, vivo_data } = vivores.data;
            if (oppores.data.code == 200 ) {
              if (oppores.data.data == null) {
                that.$message.error("oppo暂未获取到近7日订单数据");
              }else{
                
                for (var i = oppores.data.data.length - 1; i >= 0; i--) {
                  that.OppoOrders.push(oppores.data.data[i].Count)
                  that.VivoOrders.push(vivores.data.data[i].Count)
                  that.DateList.push(oppores.data.data[i].Create)
                }

                
              }
              that.Eloadings = false;
              that.initChart();
              
              
            } 

            if (vivores.data.code == 200){
              if (vivores.data.data == null) {
                that.$message.error("vivo暂未获取到近7日订单数据");
              }else{

                for (var i = vivores.data.data.length - 1; i >= 0; i--) {
                  that.VivoOrders.push(vivores.data.data[i].Count)
                }

              }
              
                
              
            }else{

               that.$message.error("当日订单接口请求失败");
            }
             
          }

        )
        
        ).catch(
          function(error){
                console.log(error);
                 that.$message.error("当日订单接口请求失败");
            }
        )

      },  
      initChart() {
        this.chart = echarts.init(document.getElementById(this.id),'westeros');
        
        this.chart.setOption({
          title: {
            text: '近7天字体购买订单汇总'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data:["OPPO购买字体数","VIVO购买字体数"]
          },
          grid: {
            left: '2%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            data: this.DateList
          },
          yAxis: {
            type: 'value'
          },
          series: [
           
            {
              name:'VIVO购买字体数',
              type:'bar',
              stack: '总量',
              data:this.VivoOrders
            },
            {
              name:'OPPO购买字体数',
              type:'bar',
              stack: '总量',
              data:this.OppoOrders
            },
            // {
            //   name:'设备数量',
            //   type:'line',
            //   stack: '总量',
            //   data:[8200, 6320, 5010, 4340, 3400, 2300, 1200]

            // },
            // {
            //   name:'模拟器数',
            //   type:'line',
            //   stack: '总量',
            //   data:[2200, 3820, 1910, 2340, 4900, 3300, 1100]
            // }
            
          ]
        })
        
      }
    }
  }
</script>

<style scoped>

</style>
